import React from "react";
import {withRouter} from "react-router-dom";
import querystring from "querystring";
import {inject, observer} from "mobx-react";
import {BackTop, WrAlertPage, WrPicker} from "../../../public";
import {Icon, Popover,NoticeBar, Tools} from "weaver-mobile";
import Detail from "./detail";
import Log from "./log";
import Feedback from "./feedback";
import Relatelink from "./relatelink";

const getLabel = Tools.getLabel;

/**
 * 评分详情
 */
@inject("accessViewStore")
@withRouter
@observer
export default class Index extends React.Component {

    constructor(props) {
        super(props);
        this.state={
            height: window.innerHeight
        }
        this.store = this.props.accessViewStore;
    }

    componentWillMount() {
        let search = this.props.location.search.replace("?", "");
        this.store.showtype = "detail";
        this.store.accessView(querystring.parse(search));
        this.store.initStore(this.props.location.pathname);
    }

    render() {
        const {msg, type1, showtype, tabs, nowyear, type, type2, resourceid,agentmessage} = this.store;
        if (msg == "noinfo") {
            return <WrAlertPage height={"100vh"} show msg={getLabel(508609, "您暂时无权限查看此数据")}/>
        }
        return (
            <BackTop
                visibilityHeight='200'
                modal
                target="accessView-content-roll"
                bottomTarget={["workrelate-menu-div", "result-close"]}
            >
                <div className="workrelate-performance-mobile-accessView workrelate-roll" style={{ height: this.state.height }}>
                    {agentmessage&& <NoticeBar marqueeProps={{ loop: true,leading: 2000, trailing: 5000, fps: 80, style: { padding: '0 7.5px' } }} icon={<Icon type="blog-weitijiao" size="xxs" />}>
                        <span dangerouslySetInnerHTML={{__html:agentmessage}}/>
                    </NoticeBar>}
                    <div className="accessView-header">
                        <Popover
                            placement="bottomLeft"
                            onSelect={this.onSelect}
                            visible={false}
                            mask={true}
                            overlay={
                                <div className="workrelate-header-item">
                                    {tabs.map(item => <Popover.Item key={item.key}><span
                                        className="workrelate-header-item-cycle">{item.title}</span></Popover.Item>)}
                                </div>
                            }
                        >
                    <span className="accessView-type">
                        <span>{this.getType()}</span>
                        <Icon size="xs" type="down"/>
                    </span>
                        </Popover>
                        <WrPicker
                            minyear={2013}
                            maxyear={new Date().getFullYear() + 1}
                            type={type1}
                            initval={[nowyear, type2]}
                            onChange={val => {
                                this.store.showtype = "detail";
                                this.store.accessView({resourceid, type1, year: val[0], type2: val[1]})
                            }}
                        />
                        <div style={{flex: 1}}/>
                    </div>
                    {showtype == "detail" && <Detail menu={this.props.menu} updateListData={this.props.updateListData}/>}
                    {showtype == "log" && <Log/>}
                    {showtype == "feedback" && <Feedback/>}
                    {showtype == "relatelink" && <Relatelink/>}
                </div>
            </BackTop>
        )
    }

    getType = () => {
        const {tabs, type1} = this.store;
        var find = tabs.find(item => item.key == type1);
        return find && find.title;
    }

    //顶部tab切换
    onSelect = (val) => {
        const {resourceid, nowyear, type1, nowmonth, nowseason} = this.store;
        let type2 = "";
        if (val.key == 1) {//月
            type2 = nowmonth;
        } else if (val.key == 2) {
            type2 = nowseason;
        }
        this.store.showtype = "detail";
        this.store.accessView({scoreid: "", resourceid, year: nowyear, type1: val.key, type2});
    }
}